{% extends "jb_admin/base.html" %}
{% load static %}
{% load jsonify %}

{% block page_content %}

<script type="text/javascript">

    //	row_filters=
    //	placeholder =
    //	row_sort=
    //	heads=
    //	rows=
    //	row_pages =

    //	can_add=
    //	can_del=
    //	search_args=ex.parseSearch()
    //	search字段从 search_args._q 来取值
    extra_fields_logic='{{ extra_fields_logic }}'

    extra_mixins = {{ extra_mixins | jsonify |default:'null' }}

    tabs={{ tabs | jsonify | default:'[]' }}

    main_com={{ main_com | jsonify | default:'null'  }}

    var fields_group = {{ fields_group | jsonify | default:'[]' }}
    var table_grid =  {{ table_grid | jsonify | default:'[]' }}
    fields_logic={
        el:'#there',
        data(){
            var childStore = new Vue()
            childStore.vc = this
            return {
                childStore:childStore,
                page_label:page_label,
                heads:heads,
                row:row,
                director_name:director_name,
                fields_group:fields_group ,
                table_grid:table_grid,
                ops:ops,

                tabgroup:{
                    crt:'main',
                    tabs:tabs
                },
                tr:cfg.tr
            }


        },
        mixins:[mix_fields_data,mix_nice_validator],
        computed:{
            has_select:function(){
                return this.selected.length !=0
            },
        },
        mounted:function(){
            var self=this
            ex.assign(this.op_funs,{
                row_changed:function(kws){
                    var row= kws.row
                    if(!ex.isin(row,self.changed_rows)){
                        self.changed_rows.push(row)
                    }
                },
                row_changed_undo_act:function(kws){
                    var md5= ex.hashDict(kws.row)
                    if(md5 == kws.row._hash){
                        ex.remove(self.changed_rows,{pk:kws.row.pk})
                    }
                },
                switch_to_tab:function(kws){
                    self.show_tab(kws.tab_name)
                    self.crt_row= kws.row
                },
                update_or_insert:function(kws){
                    var new_row = kws.new_row
                    var old_row= kws.old_row
                    self.update_or_insert(new_row,old_row)
                },

            })

        },
        methods:{


            on_tab_event:function(e){
                this.op_funs[e.name](e)
            },

            back_to_main_page:function(){
                this.tabgroup.crt='main'
            },
            show_tab:function(name){
                this.tabgroup.crt = name
                var self =this

                Vue.nextTick(function(){
                    self.$refs['_tab_'+name][0].on_show()
                })

            },
            get_attr:function(name){
                if(name == undefined){
                    return false
                }
                if(name.startsWith('!')){
                    name=name.slice(1)
                    name= name.trim()
                    return !this[name]
                }else{
                    name= name.trim()
                    return this[name]
                }
            },
            handleClick(tab, event) {
        this.show_tab(tab.name)

    }
    }

    }

    function update_cnt_size(){
//        var cnt_ht =  Math.max( $(document).height(),window.innerHeight)
        var cnt_ht =  window.innerHeight
        $('#there').height(cnt_ht -80)
    }
    $(function () {
        update_cnt_size()
//        $('.main-tab-content').height(window.innerHeight -230)
        $(window).resize(function(){
            update_cnt_size()
        });
//        $(document).resize(update_cnt_size)

        if(extra_mixins){
            fields_logic =ex.vueExtend(fields_logic,extra_mixins)
        }
        // 可能不会要下面的extra_fields_logic了
        if(extra_fields_logic){
            fields_logic.mixins.push(window[extra_fields_logic])
        }


        fields=new Vue(fields_logic)

    })

</script>

{% block extra_head %}
{% endblock %}
<style>
    a[disabled] {
        color: gray;
        pointer-events: none;
    }
</style>
<div id='there' class="flex-v">

    {% block flag %}
    <div v-if="page_label" style="border-left: 3px solid #3e8ebd;padding-left: 1em;margin-bottom: 5px;">
        <b v-text="page_label"></b>
        <span style="display: inline-block;width: 2em;"></span>
        <button type="button"
                class="btn btn-warning btn-xs"
                v-show="tabgroup.crt != 'main'"
                @click="back_to_main_page()">
            <i class="fa fa-arrow-circle-o-left fa-lg"></i><span v-text="tr.back"></span></button>
    </div>


    {% endblock %}

    {% block tab-content %}
    <div id="main-page" class="rows-block flex-v flex-grow" v-show="tabgroup.crt =='main'" style="max-height: calc( 100% - 20px);">


        <!--<div  v-if="ops.length>0">-->
            <!--<div class="oprations" v-show="tabgroup.crt == 'main'" style="padding: 5px">-->
                <!--<component v-for="op in ops"-->
                           <!--:is="op.editor"-->
                           <!--:ref="'op_'+op.name"-->
                           <!--:head="op"-->
                           <!--:ctx="op"-->
                           <!--:disabled="get_attr(op.disabled)"-->
                           <!--v-show="! get_attr(op.hide)"-->
                           <!--@operation="on_operation(op)"></component>-->
            <!--</div>-->
        <!--</div>-->


        <!--<div class="box box-success flex-v flex-grow" style="position: relative;overflow: auto;">-->

                {% block fields_content %}

                <!--<div class='field-panel suit' style="margin:1em;padding-bottom:3em ">-->
                    <!--<field  v-for='head in heads' :key="head.name" :head="head" :row='row'></field>-->
                <!--</div>-->

        <div  style="margin:1em;padding-bottom:3em ">
            <com-form-one :ctx="{heads:heads,row:row,ops:ops,fields_group:fields_group,table_grid:table_grid}"></com-form-one>
        </div>

                {% endblock %}

        <!--</div>-->
    </div>
    <div id="tab-wrap" v-if="tabgroup.crt!='main'" class="flex-grow" style="position: relative">

        <div  style="position: absolute;bottom: 0;top: 0;left: 0;right: 0;">
            <el-tabs v-if="tabgroup.tabs.length >1" type="border-card"
                     @tab-click="handleClick"
                     style="width: 100%;"
                     :value="tabgroup.crt" >
                <el-tab-pane v-for="tab in tabgroup.tabs" :name="tab.name">
                    <span slot="label" v-text="tab.label"></span>

                    <component :is="tab.com" :tab_head="tab"
                               :par_row="crt_row"
                               :ref="'_tab_'+tab.name" @tab-event="on_tab_event($event)"></component>


                </el-tab-pane>
            </el-tabs>


            <component v-else v-for="tab in tabgroup.tabs"  :is="tab.com" :tab_head="tab"
                       :par_row="crt_row"
                       :ref="'_tab_'+tab.name" @tab-event="on_tab_event($event)"></component>
        </div>


    </div>

    {% endblock %}

</div>
<style>
    .main-tab-content{

    }

    .fake-suit th{
        white-space: nowrap;
    }

    /*.table thead tr {*/
    /*display:block;*/
    /*}*/
    /*.table tbody {*/
    /*display: block;*/
    /*height: 300px;*/
    /*overflow: auto;*/
    /*}*/
    /*.table th {*/
    /*width:20%;*/
    /*}*/
    /*.table td {*/
    /*width:20%;*/
    /*}*/

</style>
{% block extra %}
{% endblock %}
{% endblock %}